const puppeteer = require('puppeteer');
const path = require('path');

async function debugFrontend() {
  console.log('🔍 开始调试前端应用...');

  const browser = await puppeteer.launch({
    headless: false,
    devtools: true
  });

  const page = await browser.newPage();

  // 监听控制台消息
  page.on('console', msg => {
    console.log(`📢 [${msg.type()}] ${msg.text()}`);
  });

  // 监听页面错误
  page.on('pageerror', error => {
    console.error('❌ 页面错误:', error.message);
  });

  // 监听请求失败
  page.on('requestfailed', request => {
    console.error('❌ 请求失败:', request.url(), request.failure().errorText);
  });

  try {
    console.log('🌐 正在打开前端页面...');
    await page.goto('http://localhost:8106', {
      waitUntil: 'networkidle2',
      timeout: 30000
    });

    // 等待几秒钟让页面完全加载
    await page.waitForTimeout(5000);

    // 检查页面内容
    const title = await page.title();
    console.log('📄 页面标题:', title);

    const content = await page.content();
    console.log('📏 页面内容长度:', content.length);

    // 检查是否有Vue应用
    const hasVue = await page.evaluate(() => {
      return !!document.querySelector('#app');
    });
    console.log('🖼️ 是否找到#app元素:', hasVue);

    // 检查是否有错误提示
    const hasError = await page.evaluate(() => {
      const errorElements = document.querySelectorAll('[class*="error"], [class*="Error"]');
      return errorElements.length > 0;
    });
    console.log('🚨 是否发现错误元素:', hasError);

  } catch (error) {
    console.error('❌ 调试过程中发生错误:', error);
  }

  // 保持浏览器打开30秒供手动检查
  console.log('⏳ 浏览器将保持打开30秒供手动检查...');
  await page.waitForTimeout(30000);

  await browser.close();
  console.log('✅ 调试完成');
}

debugFrontend().catch(console.error);